<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>欢迎页面-L-admin1.0</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="/css/font.css">
    <link rel="stylesheet" href="/css/xadmin.css">
    <script src="/js/jquery.min.js"></script>
    <script type="text/javascript" src="/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="/js/xadmin.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
        .detail{
            padding:40px
        }
        .myUp{
            float: right;
        }
        .alertForm{
            position: absolute;
            left: 10%;
            top: 10%;
            border:1px solid #0e9aef;
            width: 600px;
            background-color: white;
            color: #0A0E11;
            padding:20px
        }
    </style>
</head>

<body>
<div class="x-nav">
      <span class="layui-breadcrumb">
        <a href="">首页</a>
        <a href="">学校</a>
        <a>
          <cite>学校信息</cite></a>
      </span>
    <a class="layui-btn layui-btn-primary layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" href="javascript:location.replace(location.href);" title="刷新">
        <i class="layui-icon" style="line-height:38px">ဂ</i>
    </a>
</div>
<div style="padding: 40px">
    <fieldset>
        <legend class="school"></legend>
        <div class="detail">
        </div>
    </fieldset>
    <div style="height: 30px"></div>
    <button class="layui-btn layui-btn-sm myUp">修改</button>
</div>
<div class="alertBox"></div>
</body>
<script>
    let dom={
        school:document.querySelector(".school"),
        detail:document.querySelector(".detail"),
        myUp:document.querySelector(".myUp"),
        alertBox:document.querySelector(".alertBox")
    }
    let data={
        name:'',
        detail:''
    }
    window.onload=initPage
    function initPage() {
        $.ajax({
            url:'/course/showSchool',
            success:function (res) {
                dom.detail.innerText=res.data.detail
                dom.school.innerText=res.data.name
                data.name=res.data.name
                data.detail=res.data.detail
            },
            error:function (res) {
                alert(res.msg)
            }
        })
    }
    dom.myUp.onclick=function () {
        dom.alertBox.innerHTML=`
            <div class="alertForm">
                <div>
                <form onsubmit="return false">
                    <input type="hidden" name="id" value="1">
                    <div class="layui-row">
                        <div class="layui-col-xs12 layui-col-sm2 layui-col-md2">学校名称：</div>
                        <div  class="layui-col-xs12 layui-col-sm10 layui-col-md10">
                            <input type="text" name="name" value="${data.name}" class="layui-input"/>
                        </div>
                    </div>
                    <div style="height: 10px"></div>
                    <div class="layui-row">
                        <div class="layui-col-xs12 layui-col-sm2 layui-col-md2">学校简介：</div>
                        <div  class="layui-col-xs12 layui-col-sm10 layui-col-md10">
                          <textarea name="detail" class="layui-textarea">${data.detail}</textarea>
                        </div>
                    </div>
                    <div style="height: 10px"></div>
                    <div class="layui-row">
                        <div class="layui-col-xs12 layui-col-sm2 layui-col-md2">&nbsp;</div>
                        <div class="layui-col-xs12 layui-col-sm10 layui-col-md10">
                          <button class="layui-btn" onclick="delBox()">取消</button>
                          &nbsp;&nbsp;&nbsp;
                          <button class="layui-btn layui-btn-danger update" onclick="updateSchool()">修改</button>
                        </div>
                    </div>
                </form>
                </div>
            </div>
        `
    }
    function delBox() {
        document.querySelector(".alertBox").innerHTML='';
    }
    function updateSchool() {
        $.ajax({
            url:'/course/updateSchool',
            data:$('form').serialize(),
            success:function () {
                initPage();
                delBox();
            },
            error:function (data) {
                alert(data.msg)
                delBox()
            }
        })
    }
</script>
</html>